<template>
  <div class="equipment-manage-add-page">
    <div class="page-title-container flex" :title="pageTtile">
      <a-button type="default" @click="back()">返回 </a-button>
    </div>
    <div class="page-body-container">
      <!-- 顶部查询条件 -->
      <div class="conditions-warp">
        <a-row>
          <a-form-model ref="ruleForm" :model="conditions">
            <!-- 项目名称 -->
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
              <a-form-model-item ref="proName" label="项目名称" prop="proName">
                <a-select
                  v-model="commonField.tenantName"
                  placeholder="请选择项目名称"
                  disabled
                >
                </a-select>
              </a-form-model-item>
            </a-col>
            <!-- 标段名称 -->
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
              <a-form-model-item
                ref="blockName"
                label="标段名称"
                prop="blockName"
              >
                <a-select
                  v-model="commonField.secName"
                  placeholder="请选择标段名称"
                  disabled
                >
                </a-select>
              </a-form-model-item>
            </a-col>
            <!-- 角色名称 -->
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="12">
              <a-form-model-item
                ref="roleName"
                label="角色名称"
                prop="roleName"
              >
                <a-select
                  v-model="commonField.roleName"
                  placeholder="请选择角色名称"
                  disabled
                >
                </a-select>
              </a-form-model-item>
            </a-col>
            <!-- 系统名称 -->
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
              <a-form-model-item ref="sysName" label="系统名称" prop="sysName">
                <a-select
                  v-model="commonField.systemName"
                  placeholder="请选择系统名称"
                  disabled
                >
                </a-select>
              </a-form-model-item>
            </a-col>
            <!-- 设备类型 -->
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
              <a-form-model-item ref="equType" label="设备类型" prop="equType">
                <a-select
                  v-model="commonField.equTypeDesc"
                  placeholder="请选择设备类型"
                  disabled
                >
                </a-select>
              </a-form-model-item>
            </a-col>
            <!-- 试验室名称 -->
            <a-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="12"
              :xl="12"
              :xxl="6"
              v-if="systemCode == 'SYGLXT'"
            >
              <a-form-model-item
                ref="testName"
                label="试验室名称"
                prop="testName"
              >
                <a-select
                  v-model="commonField.trialRoomName"
                  placeholder="请选择试验室名称"
                  disabled
                >
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-form-model>
        </a-row>
      </div>
      <!--  -->
      <div class="equment-list-card-container">
        <addEquCard
          :title="commonField.equTypeDesc"
          id="id"
          :fieldSource="fieldSource"
          :isShowDelete="false"
          :disabled="true"
        ></addEquCard>
      </div>
    </div>
  </div>
</template>

<script>
//【查看】页面
import addEquCard from "./components/addEquCard";
import { queryEquimentDetails } from "@/api/user-center/equipmentManage.js";
import { getLoginData } from "@/tools";
export default {
  components: { addEquCard },
  data() {
    return {
      pageTtile: "查看",
      conditions: {
        //项目名称
        proNameSource: [],
        proName: undefined,
        proNameLoading: true,
        //标段名称
        blockNameSource: [],
        blockName: undefined,
        blockLoading: false,
        //角色名称
        roleNameSource: [],
        roleName: undefined,
        roleLoading: false,
        //系统名称
        sysNameSource: [],
        sysName: undefined,
        sysNameLoading: false,
        //设备类型
        equTypeSource: [],
        equType: undefined,
        equTypeLoading: false,
      },
      commonField: {},
      fieldSource: [],
      systemCode: "",
    };
  },
  mounted() {
    let { systemCode } = this.$route.query;
    this.systemCode = systemCode;
    this.queryEquimentDetails();
  },
  methods: {
    //查询详情数据
    queryEquimentDetails() {
      let { id = "" } = this.$route.query;
      return new Promise((resolve, reject) => {
        queryEquimentDetails({ id })
          .then((res) => {
            let { data } = res;
            this.fieldSource = data?.result?.specialField || [];
            this.commonField = data?.result?.commonField || {};
            resolve();
          })
          .catch((_) => {
            this.commonField = {};
            this.fieldSource = [];
            reject();
          });
      });
    },

    //返回
    back() {
      this.$router.back();
    },
  },
};
</script>

<style lang="less">
.equipment-manage-add-page {
  height: 100%;
  .flex();
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 0 0 10px;
  .page-title-container {
    height: 46px;
    background: #ffffff;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    border-bottom: 1px solid #e8ebf0;
    &::before {
      .flex();
      align-items: center;
      content: attr(title);
      font-size: 16px;
      height: 16px;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
    }
  }
  .page-body-container {
    flex: 1;
    flex-wrap: wrap;
    background: #fff;
    .custom-scrollbar();
    .conditions-warp {
      padding: 30px 100px 0 10px;
      .ant-form-item {
        .flex();
        .ant-form-item-label {
          width: 120px;
          flex-shrink: 0;
        }
        .ant-form-item-control-wrapper {
          flex: 1;
          textarea {
            height: 80px;
          }
          .ant-calendar-picker {
            width: 100%;
          }
        }
      }
      /deep/.ant-select {
        width: 100%;
      }
    }
    .equment-list-card-container {
      padding: 0 32px;
    }
  }
}
</style>
